<template>
    <div class="boxes">
        <div  class="innovation-head">
            <div class="innovation-text">城市查询</div>
            <input class="innovation-input" type="text" v-model="selectData" @click.stop="openShow" @input="input" />
            <button class="innovation-qbuttom" @click="queryData"></button>
        </div>
        <div class="airContent" v-if="unpack2" @click.stop>
            <div class="airBox" id="cityBox7">
                <div class="cityBox-cont" id="cityCont7">
                    <div class="cityBox-item" v-for="key in cityList" @click="information(key)">{{key.name}}-{{key.code}}-{{key.py}}</div>
                </div>
                <scrollBar7 :das="scrollNodeX" :change="selectData"></scrollBar7>
            </div>
        </div>
        <cityQuery v-if="unpack" v-on:information="information" @click.stop></cityQuery>
        <div class="innovation-body innovation-bodyCity" :class="{innovationMin:!qShow}" v-if="data!=''" id="cityQueryA">
            <div class="innovation-box" id="cityQueryB">
                <div class="innovation-block">
                    <div class="innovation-minute innovation-minuteO">
                        <h4 class="innovation-blockT">基本信息</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">城市名称：</div>
                                <div class="inn-fN">{{data.city_Name}}</div>
                                <div class="inn-l">所在国家：</div>
                                <div class="inn-fN">{{data.city_Countries}}</div>
                            </li>
                            <li>
                                <div class="inn-f">总面积：</div>
                                <div class="inn-fN inn-fN1">
                                    <div>{{data.city_Aea}}  平方公里</div>
                                    <div>市区面积：</div>
                                    <div>{{data.city_Center_Aea}}平方公里</div>
                                </div>
                                <div class="inn-l">行政区类别：</div>
                                <div class="inn-fN">{{data.city_Type}}</div>
                            </li>
                            <li>
                                <div class="inn-f">位置：</div>
                                <div class="inn-fN inn-fNR">{{data.city_Loaclhost}}</div>
                            </li>
                            <li>
                                <div class="inn-f">地形：</div>
                                <div class="inn-fN">{{data.city_Terrain}}</div>
                                <div class="inn-l">气候特点：</div>
                                <div class="inn-fN">{{data.city_Climate}}</div>
                            </li>
                        </ul>
                        <div class="innovation-details nice-btn-dBlue" @click="queryMore" v-show="!qShow">查看详情</div>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">交通干线</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">铁路干线：</div>
                                <div class="inn-fN inn-fNM">{{data.city_Railway}}</div>
                            </li>
                            <li>
                                <div class="inn-f">高铁：</div>
                                <div class="inn-fN inn-fNM">{{data.city_rail}}</div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">人口分布</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">总量：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.city_pge_Count}}</div>
                                    <div class="inn-fNx1">万人</div>
                                </div>
                                <div class="inn-l">城镇人口：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.city_pge_number}}</div>
                                    <div class="inn-fNx1">万人</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">乡村人口：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.city_rural_number}}</div>
                                    <div class="inn-fNx1">万人</div>
                                </div>
                                <div class="inn-l">常驻人口：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.city_resident_number}}</div>
                                    <div class="inn-fNx1">万人</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="innovation-minute">
                        <h4 class="innovation-blockT">经济情况</h4>
                        <ul class="innovation-block">
                            <li>
                                <div class="inn-f">人均收入：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.pge_income}}</div>
                                    <div class="inn-fNx1">元</div>
                                </div>
                                <div class="inn-l">城镇人均收入：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.city_pge_income}}</div>
                                    <div class="inn-fNx1">元</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">乡村人均收入：</div>
                                <div class="inn-fN">
                                    <div class="inn-fNx">{{data.rural_income}}</div>
                                    <div class="inn-fNx1">元</div>
                                </div>
                            </li>
                            <li>
                                <div class="inn-f">重要经济支撑：</div>
                                <div class="inn-fN inn-fNR">{{data.important_Economic_Support}}</div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <scrollBar5 :das="scrollNode" v-if="!qShow"></scrollBar5>
        </div>
    </div>
</template>
<script>
    import scrollBarX from '../component/scrollBarUltimate.vue'
    import cityQuery from '../template/citySearch.vue'
    let cityData='';
    export default {
        data () {
            return {
                data:'',  //data.success.cityDetailInfo
                cityList:[],
                query:{

                },
                scrollNodeX:{
                    parent:"cityBox7",
                    child:"cityCont7",
                    courseN:"course7",
                    sliderN:"slider7",
                    speed:60
                },
                scrollNode:{
                    parent:"cityQueryA",
                    child:"cityQueryB",
                    courseN:"course5",
                    sliderN:"slider5",
                    speed:60
                },
                props:['close'],
                shos:0,
                qShow:1,
                selectData:"",
                opens:0,
                unpack:0,
                unpack2:0
            }
        },
        watch:{
            selectData:function () {
                let arr=[];
                var ley=this.selectData.toUpperCase();
                cityData.forEach((val)=>{
                    if(val.name!=''&&val.name!=undefined&&val.name.toUpperCase().indexOf(ley)!=-1){
                        arr.push({
                            name:val.name,
                            code:val.code,
                            py:val.py
                        })
                    }else if(val.code!=''&&val.code!=undefined&&val.code.toUpperCase().indexOf(ley)!=-1){
                        arr.push({
                            name:val.name,
                            code:val.code,
                            py:val.py
                        })
                    }else if(val.py!=''&&val.py!=undefined&&val.py.toUpperCase().indexOf(ley)!=-1){
                        arr.push({
                            name:val.name,
                            code:val.code,
                            py:val.py
                        })
                    }
                });
                this.cityList=arr;
            },
            close:function () {
                this.unpack=0;
                this.unpack2=0;
            }
        },
        props:['close'],
        computed:function(){
            ;
        },
        methods:{
            queryData:function (val) {
                if(this.selectData==""||this.selectData==undefined){
                    alert("请输入要查询的城市名称")
                }else {
                   /* if(this.selectCode!=""&&this.selectCode!=undefined){*/
                        $.ajax({
                            type:'get',
                            url : '/restful/getCityDetailInfoByCode',
                            data:{
                                code:this.selectData
                            },
                            dataType : 'jsonp',
                            success:(data)=>{
                                this.data=data.success.cityDetailInfo;
                            },
                        });
                   /* }else {
                        alert("请输入正确城市名称，并在选择框中选择对应的城市")
                    }*/
                }

            },
            recieveMessage: function (data) {
                this.selectData=data;
                this.opens=0;
            },
            queryMore:function () {
                this.shos=1;
                this.qShow=0;
            },
            openShow:function (val) {
                this.unpack=1;
                this.unpack2=0;
            },
            input:function () {
                this.unpack=0;
                this.unpack2=1;
            },
            information:function (val) {
                this.selectCode=val.code;
                this.selectData=val.name;
                this.unpack=0;
                this.unpack2=0;
            }
        },
        mounted(){
            cityData=JSON.parse(sessionStorage.getItem('cityData'));
        },
        components:{
            scrollBar5:scrollBarX,
            cityQuery:cityQuery,
            scrollBar7:scrollBarX
        }
    }
</script>
<style scoped>
    .airContent,.airBox{
        height: auto !important;
    }
    .airBox{
        max-height: 230px;
        overflow: hidden;
    }
    .cityBox-item{
        font-size: 12px;
        color: white;
        height: 23px;
        line-height: 23px;
        padding-left: 20px;
    }
    .cityBox-item:hover{
        background-color:#25406d;
        color: #be5428;
        cursor:pointer;
        transition: background .3s linear;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#224b79), to(#263763));
        background: -moz-linear-gradient(top, #224b79, #263763);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#224b79', endColorstr='#263763');
    }
    .cityBox-cont{
        position: relative;
    }
    .innovation-details{
        margin-top: 52px !important;
    }
    .innovation-block{
        overflow: hidden;
    }
    .innovation-box{
        height: auto !important;
    }
    .innovation-minuteO{
        margin-top: 100px;
        height:270px;
    }
    .innovationMin{
        height: 390px !important;
    }
    .inn-fN1 > div:nth-of-type(2) {
        width: 68px;
    }
    .inn-fN1 > div:nth-of-type(1), .inn-fN1 > div:nth-of-type(3) {
        width: 111px;
        padding-left: 0px;
    }
    .inn-fNM{
        width:690px !important;
    }
</style>